import React, {FC, useEffect, useMemo, useState} from 'react'
import {Radio} from 'antd'
import SearchForm from '@/components/SearchForm'
import {getFleetDriver} from '@/service/customer/fleet'
import Styles from './index.less'
import CustomTable from '@/components/Table'

interface FleetDriverListType {
	fleetId: string
}

const fleetDriverList: FC<FleetDriverListType> = ({fleetId}) => {
	const [tabValue, setTabValue] = useState('99')
	const [loading, setLoading] = useState(false)
	const [dataList, setDataList] = useState<any[]>([])
	const [total, setTotal] = useState(0)
	const [allDiver, setAllDiver] = useState()
	const [activeDriver, setActiveDriver] = useState()
	const [exitDriver, setExitDiver] = useState()
	const [searchData, setSearchData] = useState<any>({})
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const FormItems: any[] = useMemo(
		() => [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						key: 'fleetName',
						name: 'fleetName',
						label: '小组名称',
					},
					{
						type: 'input',
						key: 'expressId',
						name: 'expressId',
						label: '司机id',
					},
					{
						type: 'input',
						key: 'driverName',
						name: 'driverName',
						label: '司机名称',
					},
				],
			},
		],
		[],
	)

	const getColnums: any[] = useMemo(
		() => [
			{
				title: '司机ID',
				dataIndex: 'expressId',
				align: 'center',
				width: 120,
			},
			{title: '司机姓名', dataIndex: 'name', align: 'center', width: 120},
			{
				title: '司机联系方式',
				dataIndex: 'tel',
				align: 'center',
				width: 120,
			},
			{title: '车牌号', dataIndex: '', align: 'center', width: 120},
			{
				title: '车队长名称',
				dataIndex: 'captainName',
				align: 'center',
				width: 120,
			},
			{
				title: '司管员名称',
				dataIndex: 'adminName',
				align: 'center',
				width: 120,
			},
		],
		[dataList],
	)

	const getData = async () => {
		setLoading(true)
		const obj = {
			...params,
			status: tabValue === '99' ? undefined : tabValue,
			fleetId,
			...searchData,
		}
		const data = await getFleetDriver(obj)
		if (data.code === 0) {
			setDataList(data.data.page.records)
			setTotal(data.data.page.total)
			if (tabValue === '99') {
				setAllDiver(data?.data?.page?.total)
			}
		}
		setLoading(false)
	}

	useEffect(() => {
		const obj = {
			current: 1,
			size: 10,
			fleetId,
		}
		getFleetDriver({...obj, status: '2'}).then((res: any) => {
			if (res?.success) {
				setActiveDriver(res?.data?.page?.total)
			}
		})
		getFleetDriver({...obj, status: '3'}).then((res: any) => {
			if (res?.success) {
				setExitDiver(res?.data?.page?.total)
			}
		})
	}, [])

	useEffect(() => {
		if (fleetId) {
			getData()
		}
	}, [params, fleetId, tabValue])

	return (
		<div className={Styles.FleetDriverList}>
			<div style={{padding: '12px 0'}}>
				<Radio.Group
					size="middle"
					value={tabValue}
					onChange={(e) => {
						setTabValue(e.target.value)
						setParams({
							current: 1,
							size: 10,
						})
					}}>
					<Radio.Button value="99">
						全部司机({allDiver || 0})
					</Radio.Button>
					<Radio.Button value="2">
						在职司机({activeDriver || 0})
					</Radio.Button>
					<Radio.Button value="3">
						离职司机({exitDriver || 0})
					</Radio.Button>
				</Radio.Group>
			</div>
			<div className={Styles.searchBox}>
				<SearchForm
					formLayout={{
						labelCol: {flex: '90px'},
						wrapperCol: {flex: '1'},
					}}
					formItems={FormItems}
					onReset={() => {
						setSearchData({})
						setParams({
							current: 1,
							size: 10,
						})
					}}
					onFinish={(value) => {
						setSearchData(value)
						setParams({
							current: 1,
							size: 10,
						})
					}}
				/>
			</div>
			<div className={Styles.content}>
				<CustomTable
					params={params}
					columns={getColnums}
					total={total}
					pagination
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={dataList}
				/>
			</div>
		</div>
	)
}

export default fleetDriverList
